<template>
  <div class="container">
    <van-nav-bar fixed>

      <template #left>
        <!-- <div class="logo2"></div> -->
        <span><img src="../../assets/微信图片_20211210214335.png"
               style="width:1rem"></span>
        <div class="logoText"><img src="../../assets/大联盟网台.png"
               style="width:50%"
               alt=""></div>
      </template>
      <template #right>
        <!-- 主页搜索按钮 -->
        <van-button round
                    class="search-btn"
                    icon="search"
                    type="info"
                    @click="$router.push({ path: '/search' })">
          <span class="searchFontColor">搜索</span>
        </van-button>
      </template>
    </van-nav-bar>

    <!-- 八大专栏 -->
    <span class="grid-title-top"><img src="../../assets/八大专栏.png"
           style="width:100%"
           alt="">
      <van-divider />
    </span>
    <van-grid :column-num="4">
      <van-grid-item @click="$router.push({path:'/column',query:{roleid:14371,aid:807273,name:'衣'}})">
        <icon-svg icon-class="yifu"
                  style="font-size:40px" />
        <span style="font-size:12px">衣</span>
      </van-grid-item>
      <van-grid-item @click="$router.push({path:'/column',query:{roleid:14371,aid:807275}})">
        <icon-svg icon-class="chidacan"
                  style="font-size:40px" />
        <span style="font-size:12px">食</span>
      </van-grid-item>
       <van-grid-item @click="$router.push({path:'/column',query:{roleid:14371,aid:807276}})">
        <icon-svg icon-class="house"
                  style="font-size:40px" />
        <span style="font-size:12px">住</span>
      </van-grid-item>
       <van-grid-item @click="$router.push({path:'/column',query:{roleid:14371,aid:807277 }})">
        <icon-svg icon-class="lanqiu"
                  style="font-size:40px" />
        <span style="font-size:12px">行</span>
      </van-grid-item>
       <van-grid-item @click="$router.push({path:'/column',query:{roleid:14371,aid:807278}})">
        <icon-svg icon-class="jiankang"
                  style="font-size:40px" />
        <span style="font-size:12px">健康</span>
      </van-grid-item>
       <van-grid-item @click="$router.push({path:'/column',query:{roleid:14371,aid:807279}})">
        <icon-svg icon-class="shuji"
                  style="font-size:40px" />
        <span style="font-size:12px">教育</span>
      </van-grid-item>
       <van-grid-item @click="$router.push({path:'/column',query:{roleid:14371,aid:807280}})">
        <icon-svg icon-class="yule"
                  style="font-size:40px" />
        <span style="font-size:12px">娛樂</span>
      </van-grid-item>
       <van-grid-item @click="$router.push({path:'/column',query:{roleid:14371,aid:807281}})">
        <icon-svg icon-class="qianbaoqianjia"
                  style="font-size:40px" />
        <span style="font-size:12px">理財</span>
      </van-grid-item>
    </van-grid>
    <!-- 轮播图 -->
    <span class="grid-title"><img src="@/assets/近日热点.png"
           style="width:150%"
           alt=""></span>
    <van-swipe :autoplay="3000"
               vertical>
      <van-swipe-item v-for="item in carousel"
                      :key="item.id">
             <span class="felxText">{{item.text}}</span>
        <img v-lazy="item.imgs[0]"
             class="imgs" />
      </van-swipe-item>
    </van-swipe>
    <!-- tab标签页 -->
    <van-grid :column-num="2">
      <van-grid-item>
        <img src="../../assets/307cd99f6fe77a82ba76f9e33642fabc.jpg"
             alt=""
             class="admissions">
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/c8ea15ce36d3d539c35d43ee3788b658352ab056.jpeg"
             class="admissions"
             alt="">
      </van-grid-item>
    </van-grid>
    <van-tabs>
      <van-tab v-for="(item,index) in tab"
               :title="item.name"
               :key="index">
        <van-row>
          <span class="grid-title"><img src="@/assets/热点栏目.png"
                 alt=""></span>
          <van-list v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad">
            <van-cell v-for="item in health"
                      :key="item.id">
              <img :src="item.imgs"
                   class="newImg"
                   alt="">
              <h5>{{ item.text }}</h5>
            </van-cell>
          </van-list>
        </van-row>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
// import '../../../dist/icon/iconfont.js'
import '../../assets/icon/iconfont.js'
import { getLists, regExpData } from './home.js'
import moment from 'moment'

moment.locale('zh-cn')
export default {
  name: 'home',
  data () {
    return {
      goods: [
        { id: 1, name: '手机' },
        { id: 2, name: '书籍' },
        { id: 3, name: '家具' },
        { id: 4, name: '电器' },
        { id: 5, name: '日用' },
        { id: 6, name: '衣服' },
        { id: 7, name: '鞋子' }
      ],
      list: [], // 文章列表
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg'
      ],
      loading: false,
      finished: false,
      theme2: 'light',
      leftMenu: false,
      // 咨询
      health: [],
      // 轮播图
      carousel: [],
      tab: [{ id: 1, name: '首頁' }, { id: 2, name: '大聯盟宗旨' }, { id: 3, name: '課後教育宗旨' }, { id: 4, name: '大聯盟雜志' }, { id: 5, name: 'Link專頁' }
      ]
    }
  },
  methods: {
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const res = await getLists({
        aid: 807273,
        roleid: 14317
      }).then(res => {
        this.health = regExpData(res.data)
        console.log(this.health, '咨询')
      })
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.health.push()
        }
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.health.length >= this.health.length) {
          this.finished = true
        }
      }, 1000)
    }
  },
  mounted () {
    // 健康咨询

    // 轮播图
    getLists({
      aid: 810609,
      roleid: 14371
    }).then(res => {
      this.carousel = regExpData(res.data)
      console.log(this.carousel, '轮播')
    })
  }
}
</script>

<style lang="less">
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.container {
  // background-color: #f6f7fb;
  // background-color: white;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 46px;
  padding-bottom: 50px;
  overflow: hidden;
  overflow-y: auto;

  .van-col {
    img {
      width: 100%;
      height: 100%;
    }
  }

  // logo区域
  .logo {
    width: 1rem;
    height: 1.875rem;
  }

  .logo2 {
    background: url("~@/assets/微信图片_20211210214335.png");
    width: 100%;
    height: 100%;
  }

  // 搜索按钮
  .search-btn {
    width: 100px;
    height: 50%;
    background-color: #f6f6f6;
    border: #f6f6f6;
    .van-icon-search {
      color: #0f9;
    }
  }

  .van-swipe {
    width: 100%;
    height: 200px;

    .van-swipe__track {
      height: 100%;
    }
  }

  .van-tabs {
    height: 100%;
    box-sizing: border-box;
    // tab栏标题
    .van-tabs__wrap {
      position: fixed;
      left: 0;
      right: 0;
      top: 46px;
      z-index: 999;
    }

    // tab栏内容区域
    .van-tabs__content {
      margin-bottom: 50px;
      height: 100%;

      .van-cell__label span {
        padding-right: 10px;
      }
    }
  }

  .grid-title-top {
    display: flex;
    font-size: 20px;
    margin-top: 45px;
  }
  .grid-title {
    display: flex;
    font-size: 20px;
  }
}

.imgs {
  width: 100%;
  height: 100%;
}

.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
  transform: translateX(10px);
  opacity: 0;
}

.newImg {
  width: 50%;
}

.iconfont {
  text-align: center;
}
.admissions {
  width: 100%;
}
.logoText {
  color: #357d24;
  font-size: 12px;
}
.searchFontColor {
  color: #39b778;
}
.felxText{
position: absolute;
font-size: 15px;
color: red;
bottom: 0;
}
</style>
